<template>
  <div class="dashboard-page">
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 未登录视图 -->
      <div v-if="!isLoggedIn" class="welcome-section">
        <!-- 英雄区域 -->
        <div class="hero-section">
          <div class="hero-content">
            <h1 class="hero-title">🎯 Trainer</h1>
            <p class="hero-subtitle">科学学习系统 · 让知识真正属于你</p>
            <p class="hero-description">
              基于认知科学的学习平台，通过任务设定、学习实践、练习巩固、复习强化、数据分析的完整闭环，
              帮助你更高效地掌握知识，让学习变得科学而有趣。
            </p>
            <div class="hero-actions">
              <el-button type="primary" size="large" @click="startLearning" class="cta-button">
                <span class="btn-icon">🚀</span>
                开始学习之旅
              </el-button>
              <el-button size="large" @click="showAuthModal('register')" class="secondary-button">
                <span class="btn-icon">📝</span>
                免费注册
              </el-button>
            </div>
          </div>
          <div class="hero-visual">
            <div class="learning-flow">
              <div class="flow-step" v-for="(step, index) in learningFlow" :key="index">
                <div class="step-icon">{{ step.icon }}</div>
                <div class="step-content">
                  <h3>{{ step.title }}</h3>
                  <p>{{ step.description }}</p>
                </div>
                <div v-if="index < learningFlow.length - 1" class="flow-arrow">→</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习流程展示 -->
        <div class="learning-process-section">
          <div class="section-header">
            <h2 class="section-title">科学学习流程</h2>
            <p class="section-subtitle">基于认知科学的五步学习法，让知识掌握更牢固</p>
          </div>
          <div class="process-steps">
            <div class="process-step" v-for="(step, index) in processSteps" :key="index">
              <div class="step-number">{{ index + 1 }}</div>
              <div class="step-info">
                <h3>{{ step.title }}</h3>
                <p>{{ step.description }}</p>
                <div class="step-features">
                  <span v-for="feature in step.features" :key="feature" class="feature-tag">
                    {{ feature }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 核心功能展示 -->
        <div class="features-section">
          <div class="section-header">
            <h2 class="section-title">为什么选择 Trainer？</h2>
            <p class="section-subtitle">科学方法 + 智能技术 = 高效学习</p>
          </div>
          <div class="features-grid">
            <div class="feature-card" v-for="feature in coreFeatures" :key="feature.id">
              <div class="feature-icon">{{ feature.icon }}</div>
              <h3 class="feature-title">{{ feature.title }}</h3>
              <p class="feature-description">{{ feature.description }}</p>
              <div class="feature-benefits">
                <span v-for="benefit in feature.benefits" :key="benefit" class="benefit-item">
                  ✓ {{ benefit }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习成果展示 -->
        <div class="results-section">
          <div class="section-header">
            <h2 class="section-title">学习成果可视化</h2>
            <p class="section-subtitle">数据驱动学习，让进步看得见</p>
          </div>
          <div class="results-showcase">
            <div class="result-item">
              <div class="result-icon">📈</div>
              <h3>学习进度追踪</h3>
              <p>实时记录学习轨迹，可视化展示掌握程度</p>
            </div>
            <div class="result-item">
              <div class="result-icon">🎯</div>
              <h3>个性化目标</h3>
              <p>智能设定学习目标，科学规划学习路径</p>
            </div>
            <div class="result-item">
              <div class="result-icon">🧠</div>
              <h3>记忆强化</h3>
              <p>基于遗忘曲线的智能复习提醒</p>
            </div>
            <div class="result-item">
              <div class="result-icon">🏆</div>
              <h3>成就系统</h3>
              <p>解锁学习成就，激发持续学习动力</p>
            </div>
          </div>
        </div>

        <!-- 行动召唤区域 -->
        <div class="cta-section">
          <div class="cta-content">
            <h2 class="cta-title">准备好开始你的科学学习之旅了吗？</h2>
            <p class="cta-subtitle">加入数千名学习者，体验高效学习的新方式</p>
            <div class="cta-actions">
              <el-button type="primary" size="large" @click="startLearning" class="cta-button">
                <span class="btn-icon">🎓</span>
                立即开始学习
              </el-button>
              <el-button size="large" @click="showAuthModal('register')" class="secondary-button">
                <span class="btn-icon">📝</span>
                免费注册账号
              </el-button>
            </div>
            <div class="cta-stats">
              <div class="stat-item">
                <span class="stat-number">1000+</span>
                <span class="stat-label">活跃学习者</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">95%</span>
                <span class="stat-label">学习满意度</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">3x</span>
                <span class="stat-label">学习效率提升</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 已登录视图 -->
      <div v-else class="user-dashboard">
        <!-- 欢迎区域 -->
        <div class="welcome-card">
          <div class="welcome-content">
            <div class="welcome-text">
              <h1 class="welcome-title">欢迎回来，{{ user.name || user.username || '学习者' }}！</h1>
              <p class="welcome-subtitle">继续你的学习之旅，让知识成为你的力量</p>
            </div>
            <div class="welcome-actions">
              <el-button type="primary" size="large" @click="$router.push('/task')">
                <span class="btn-icon">🎯</span>
                设定学习任务
              </el-button>
              <el-button size="large" @click="$router.push('/learn')">
                <span class="btn-icon">📚</span>
                开始学习
              </el-button>
            </div>
          </div>
        </div>

        <!-- 学习概览 -->
        <div class="learning-overview">
          <div class="overview-header">
            <h2>今日学习概览</h2>
            <p>继续你的学习进度，保持学习节奏</p>
          </div>
          <div class="overview-cards">
            <div class="overview-card">
              <div class="card-icon">🎯</div>
              <div class="card-content">
                <h3>学习任务</h3>
                <p>设定和跟踪学习目标</p>
                <el-button size="small" @click="$router.push('/task')">查看任务</el-button>
              </div>
            </div>
            <div class="overview-card">
              <div class="card-icon">📚</div>
              <div class="card-content">
                <h3>知识学习</h3>
                <p>系统学习新知识</p>
                <el-button size="small" @click="$router.push('/learn')">开始学习</el-button>
              </div>
            </div>
            <div class="overview-card">
              <div class="card-icon">📝</div>
              <div class="card-content">
                <h3>练习巩固</h3>
                <p>通过练习加深理解</p>
                <el-button size="small" @click="$router.push('/practice')">开始练习</el-button>
              </div>
            </div>
            <div class="overview-card">
              <div class="card-icon">🔄</div>
              <div class="card-content">
                <h3>复习强化</h3>
                <p>智能复习巩固记忆</p>
                <el-button size="small" @click="$router.push('/review')">开始复习</el-button>
              </div>
            </div>
            <div class="overview-card">
              <div class="card-icon">📈</div>
              <div class="card-content">
                <h3>数据报告</h3>
                <p>查看学习数据分析</p>
                <el-button size="small" @click="$router.push('/report')">查看报告</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer-section">
      <div class="footer-content">
        <div class="footer-info">
          <p class="copyright">© 2024 Trainer 学习平台. 保留所有权利.</p>
          <p class="description">基于科学学习理论，助力知识掌握与技能提升</p>
        </div>
        <div class="footer-links">
          <a href="#" class="footer-link">关于我们</a>
          <a href="#" class="footer-link">隐私政策</a>
          <a href="#" class="footer-link">服务条款</a>
          <a href="#" class="footer-link">联系我们</a>
        </div>
      </div>
    </div>

    <!-- 登录注册弹框 -->
    <AuthModal
      :visible.sync="authModalVisible"
      :default-mode="authModalMode"
      @login-success="handleLoginSuccess"
      @close="handleAuthModalClose"
    />
  </div>
</template>

<script>
import AuthModal from '@/components/AuthModal.vue'

export default {
  name: "UserDashboard",
  components: {
    AuthModal
  },
  data() {
    return {
      authModalVisible: false,
      authModalMode: "login",
      // 学习流程数据
      learningFlow: [
        {
          icon: "🎯",
          title: "设定任务",
          description: "明确学习目标"
        },
        {
          icon: "📚",
          title: "系统学习",
          description: "掌握核心知识"
        },
        {
          icon: "📝",
          title: "练习巩固",
          description: "加深理解记忆"
        },
        {
          icon: "🔄",
          title: "复习强化",
          description: "防止遗忘"
        },
        {
          icon: "📈",
          title: "数据分析",
          description: "优化学习策略"
        }
      ],
      // 学习流程步骤
      processSteps: [
        {
          title: "任务设定",
          description: "基于SMART原则设定学习目标，明确学习方向",
          features: ["个性化目标", "进度追踪", "习惯养成"]
        },
        {
          title: "知识学习",
          description: "系统学习新知识，建立知识框架",
          features: ["结构化内容", "多媒体学习", "理解检测"]
        },
        {
          title: "练习巩固",
          description: "通过多样化练习加深理解和记忆",
          features: ["检索练习", "应用实践", "即时反馈"]
        },
        {
          title: "复习强化",
          description: "基于遗忘曲线的智能复习系统",
          features: ["间隔重复", "自适应调度", "记忆强化"]
        },
        {
          title: "数据分析",
          description: "可视化学习数据，优化学习策略",
          features: ["进度可视化", "效果分析", "策略优化"]
        }
      ],
      // 核心功能特性
      coreFeatures: [
        {
          id: 1,
          icon: "🧠",
          title: "科学学习理论",
          description: "基于认知科学的最新研究成果",
          benefits: ["间隔重复", "检索练习", "元认知监控"]
        },
        {
          id: 2,
          icon: "🎯",
          title: "个性化学习",
          description: "根据个人特点定制学习路径",
          benefits: ["智能推荐", "难度自适应", "进度跟踪"]
        },
        {
          id: 3,
          icon: "📊",
          title: "数据驱动",
          description: "用数据指导学习决策",
          benefits: ["学习分析", "效果评估", "策略优化"]
        },
        {
          id: 4,
          icon: "🔄",
          title: "闭环学习",
          description: "完整的学习-练习-复习-分析循环",
          benefits: ["系统化学习", "持续改进", "长期记忆"]
        }
      ]
    }
  },
  computed: {
    user() {
      return this.$store.state.user || {}
    },
    isLoggedIn() {
      return !!this.$store.state.user && (!!this.$store.state.user.username || !!this.$store.state.user.name)
    }
  },
  methods: {
    startLearning() {
      // 如果用户未登录，弹出登录弹框
      if (!this.isLoggedIn) {
        this.showAuthModal('login')
        return
      }
      // 已登录用户直接跳转到学习页面
      this.$router.push('/learn')
    },
    showAuthModal(mode) {
      this.authModalMode = mode
      this.authModalVisible = true
    },
    handleLoginSuccess(user) {
      // 登录成功后的处理
      this.$store.commit("setUser", user)
      this.$message.success("登录成功！")
      this.authModalVisible = false
    },
    handleAuthModalClose() {
      this.authModalVisible = false
    }
  }
}
</script>

<style scoped>
/* 确保页面完全填充 */
:global(body), :global(html) {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

.dashboard-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 90px);
  width: 100vw;
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dashboard-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  z-index: -1;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* 英雄区域 */
.hero-section {
  width: 100%;
  padding: 80px 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 600px;
}

.hero-content {
  flex: 1;
  max-width: 600px;
  padding-right: 40px;
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 20px;
  font-weight: 600;
  color: #475569;
}

.hero-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 40px;
  color: #64748b;
}

.hero-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-button {
  border-radius: 30px;
  padding: 16px 40px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  color: white;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.secondary-button {
  border-radius: 30px;
  padding: 16px 40px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  background: white;
  border: 2px solid #e2e8f0;
  color: #475569;
}

.secondary-button:hover {
  background: #f8fafc;
  border-color: #3b82f6;
  color: #3b82f6;
  transform: translateY(-3px);
}

.btn-icon {
  margin-right: 10px;
  font-size: 1.2rem;
}

/* 学习流程可视化 */
.hero-visual {
  flex: 1;
  max-width: 500px;
}

.learning-flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.flow-step {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 15px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.step-icon {
  font-size: 2rem;
  margin-right: 15px;
  width: 50px;
  text-align: center;
}

.step-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #334155;
}

.step-content p {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

.flow-arrow {
  font-size: 1.5rem;
  margin: 0 10px;
  color: #94a3b8;
}

/* 通用区域样式 */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #64748b;
  font-weight: 400;
  line-height: 1.6;
}

/* 学习流程展示区域 */
.learning-process-section {
  width: 100%;
  padding: 80px 40px;
  background: white;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.process-step {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 20px;
  padding: 30px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.process-step:hover {
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
}

.step-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 30px;
  flex-shrink: 0;
}

.step-info {
  flex: 1;
}

.step-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.step-info p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 15px;
}

.step-features {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.feature-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* 核心功能展示区域 */
.features-section {
  width: 100%;
  padding: 80px 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 3.5rem;
  margin-bottom: 25px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  line-height: 1.3;
}

.feature-description {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
}

.feature-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.benefit-item {
  font-size: 0.9rem;
  color: #3b82f6;
  font-weight: 500;
}

/* 学习成果展示区域 */
.results-section {
  width: 100%;
  padding: 80px 40px;
  background: white;
}

.results-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.result-item {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 15px;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.result-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
}

.result-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.result-item h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.result-item p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* 行动召唤区域 */
.cta-section {
  width: 100%;
  padding: 80px 40px;
  background: white;
  text-align: center;
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

.cta-subtitle {
  font-size: 1.2rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.cta-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.8;
}

/* 用户仪表板 */
.user-dashboard {
  width: 1200px;
  padding: 40px 20px;
}

/* 欢迎区域 */
.welcome-card {
  background: linear-gradient(135deg, #d2d6de 0%, #87aee7 100%);
  color: rgb(15, 14, 14);
  border-radius: 20px;
  padding: 50px;
  margin-bottom: 40px;
  text-align: center;
}

.welcome-content {
  max-width: 800px;
  margin: 0 auto;
}

.welcome-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
}

.welcome-subtitle {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.welcome-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.welcome-actions .el-button {
  border-radius: 25px;
  padding: 14px 30px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.welcome-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 学习概览 */
.learning-overview {
  width: 100%;
}

.overview-header {
  text-align: center;
  margin-bottom: 40px;
}

.overview-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
}

.overview-header p {
  font-size: 1.1rem;
  color: #64748b;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.overview-card {
  background: white;
  border-radius: 15px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.overview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.card-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.card-content p {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 15px;
  line-height: 1.4;
}

.card-content .el-button {
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 0.85rem;
}

/* 底部版权信息 */
.footer-section {
  padding: 30px 20px;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-info {
  flex: 1;
  min-width: 300px;
}

.copyright {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.description {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

.footer-links {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.footer-link {
  color: #64748b;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.footer-link:hover {
  color: #3b82f6;
  transform: translateY(-1px);
}

.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.3s ease;
}

.footer-link:hover::after {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
    padding: 60px 30px;
  }
  
  .hero-content {
    padding-right: 0;
    margin-bottom: 40px;
  }
  
  .hero-visual {
    max-width: 100%;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .results-showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .overview-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 50px 20px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.3rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .section-subtitle {
    font-size: 1.1rem;
  }
  
  .learning-process-section,
  .features-section,
  .results-section,
  .cta-section {
    padding: 60px 20px;
  }
  
  .process-step {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }
  
  .step-number {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .feature-card {
    padding: 30px 20px;
  }
  
  .results-showcase {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .cta-title {
    font-size: 2rem;
  }
  
  .cta-stats {
    gap: 40px;
  }
  
  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .welcome-card {
    padding: 40px 30px;
  }
  
  .welcome-title {
    font-size: 2rem;
  }
  
  .welcome-actions {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 40px 15px;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-description {
    font-size: 0.95rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
  }
  
  .learning-process-section,
  .features-section,
  .results-section,
  .cta-section {
    padding: 50px 15px;
  }
  
  .process-step {
    padding: 20px 15px;
  }
  
  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .step-info h3 {
    font-size: 1.3rem;
  }
  
  .step-info p {
    font-size: 0.9rem;
  }
  
  .feature-card {
    padding: 25px 15px;
  }
  
  .feature-icon {
    font-size: 3rem;
  }
  
  .feature-title {
    font-size: 1.3rem;
  }
  
  .feature-description {
    font-size: 0.9rem;
  }
  
  .cta-title {
    font-size: 1.8rem;
  }
  
  .cta-subtitle {
    font-size: 1rem;
  }
  
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .cta-stats {
    gap: 30px;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .overview-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .overview-card {
    padding: 20px 15px;
  }
  
  .card-icon {
    font-size: 2rem;
  }
  
  .card-content h3 {
    font-size: 1rem;
  }
  
  .card-content p {
    font-size: 0.85rem;
  }
  
  .welcome-card {
    padding: 35px 20px;
  }
  
  .welcome-title {
    font-size: 1.8rem;
  }
  
  .welcome-subtitle {
    font-size: 1rem;
  }
  
  .cta-button,
  .secondary-button {
    padding: 12px 25px;
    font-size: 1rem;
  }
  
  .welcome-actions .el-button {
    padding: 12px 25px;
    font-size: 0.95rem;
  }
  
  .footer-section {
    padding: 25px 15px;
  }
  
  .footer-links {
    gap: 15px;
  }
  
  .footer-link {
    font-size: 0.85rem;
  }
}
</style>
